<!--
 * @description 展室(固定数量)
 * @author dumeng
 * @date 2022/11/28
 -->
<template>
  <section
    v-if="list.length !== 0"
    class="exhibition-room-fixed-page"
    :style="{
      'margin-top': top,
      'margin-bottom': marginBottom,
      padding: `0 ${spacing}`,
    }"
  >

    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :option="option"
      :hide-desc="option.isMore === '2'"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <section
      class="exhibition-room-container"
      :style="{
        'border-radius':
          !isShowModuleName && option.isMore === '2' ? radiusSize : '0 0 '+ radiusSize+ ' ' + radiusSize
      }"
    >
      <ul class="exRoomFixed-page-list" v-if="option.styleDisplay ==='1' || option.styleDisplay === undefined">
        <li v-for="(item, index) in list" :key="index">
          <newsListStyleThree
            v-if="item.showType == 'ZSXS_YWZTYS'"
            :item="item"
            :label-obj="labelObj"
            :option="option" 
          />
          <!-- 大图 -->
          <newsListStyleSix v-else-if="item.showType == 'ZSXS_TWHPBTYS'" :item="item" :label-obj="labelObj" :option="option"  />
          <newsListStyleOne v-else :item="item" :label-obj="labelObj" :option="option"  />
        </li>
      </ul>

      <div v-if="option.styleDisplay ==='2'">
        <template v-if=" isInitData">
          <div
            v-masonry
            transition-duration="0s"
            class="masonry-list-box"
            item-selector=".box-item"
            :fit-width="false"
            :gutter="6"
          >
            <div
              v-for="(item, index) in Gridlist"
              :key="index"
              v-masonry-tile
              class="box-item"
              @click="toDetail(item)"
            >
              <div class="item-img">
                <label-comp v-if="labelObj !== undefined" :label-list="item.labelList" />
                <van-image :src="setImgPath(item.courseImg, item.courseImgUrl)" :fit="option.fit">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="./components/images/error-icon.png" alt>
                  </template>
                </van-image>
              </div>
              <div class="item-bottom">
                <div class="item-title">
                  <span>{{ item.courseName }}</span>
                </div>
                <div class="item-desc" v-if="showSubTilte" >
                  <span>{{ item.courseIntroduce }}</span>
                </div>
                <div class="item-left-txt" v-if="thumbsUp" >
                  <span v-if="Likes" >{{ item.Likes | toDecimal }}</span>
                 <img  src="./components/images/likes.png" alt style="width: 15px; height: 15px;">
               </div>  
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div
            class="list-box"
          >
            <div
              v-for="(item, index) in Gridlist"
              :key="index"
              class="box-item"
              @click="toDetail(item)"
            >
              <div class="item-img">
                <label-comp v-if="labelObj !== undefined" :label-list="item.labelList" />
                <van-image :src="setImgPath(item.courseImg, item.courseImgUrl)" :fit="option.fit">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="./components/images/error-icon.png" alt>
                  </template>
                </van-image>
              </div>
              <div class="item-bottom">
                <div class="item-title etc">
                  <span>{{ item.courseName }}</span>
                </div>
                <div class="item-desc" v-if="showSubTilte" >
                  <span>{{ item.courseIntroduce }}</span>
                </div>
                  <!-- v-if="Likes" v-if="thumbsUp"  -->
                <div class="item-left-txt" >
                  <span>{{ item.Likes | toDecimal }}</span>
                 <img  src="./components/images/likes.png" alt style="width: 15px; height: 15px;">
               </div>  
              </div>
            </div>
          </div>
        </template>
      </div>
    </section>
  </section>
</template>

<script>
import mixins from './../mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'
import newsListStyleOne from '../exhibition_room/components/NewsListStyleOne.vue'
import newsListStyleThree from '../exhibition_room/components/NewsListStyleThree'
import newsListStyleSix from '../exhibition_room/components/NewsListStyleSix'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
const defImg = ''
export default {
  name: 'exhibitionRoomFixed',
  components: {
    CellTitle,
    LabelComp,
    newsListStyleOne,
    newsListStyleThree,
    newsListStyleSix
  },
  filters: {
    toDecimal(num) {
      if (num > 10000) {
        var s = (num / 10000).toString()
        let numList = []
        let str = ''
        if (s.indexOf('.') != -1) {
          numList = s.split('.')
        } else {
          numList.push(s)
        }
        if (numList.length > 0) {
          if (numList.length == 1) {
            str = numList[0] + 'w'
          } else {
            for (let i = 0; i < numList.length; i++) {
              if (i == 0) {
                str = numList[0] + '.'
              }
              if (i == 1) {
                if (numList[i].length >= 2) {
                  const numLength = numList[i].length

                  str += numList[i].substring(0, 2)
                  if (
                    numLength > 2 &&
                      parseFloat(numList[i].substring(2, numLength)) >= 1
                  ) {
                    str += 'w+'
                  } else {
                    str += 'w'
                  }
                } else {
                  str += numList[i]
                  if (parseFloat(numList[i]) >= 1) {
                    str += 'w+'
                  } else {
                    str += 'w'
                  }
                }
              }
            }
          }
        }
        return str
      } else {
        return num
      }
    }
  },
  computed: {
    // 列表展示样式
    styleDisplay(){
      return this.option.styleDisplay
    },
     // 是否展示副标题
     showSubTilte() {
      return this.option.showSubTilte
    },
    // 是否显示点赞量
    Likes(){
      return this.option.Likes
    },
    // 是否支持点赞
    thumbsUp(){
      return this.option.thumbsUp
    }
   
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    },

  },
  data() {
    return {
      nextUrl: '',
      firstObj: {},
      list: [],
      labelObj: undefined
    }
  },
  async created() {
    if (this.isInitData) {
      this.labelObj = await this.getLabelList()
      this.initData()
    } else {
      this.list = [
        {
          mainTitle: '展室名称',
          subTitle: '副标题',
          Likes:'1208574577',
          publishTime: '2022/3/10',
          url: 'http://beyond.3dnest.cn/play/?m=012d102a_qQiT_b6f9_2Ts',
          tag: 'VR展厅',
          type: '1',
          showType: '2',
          imgUrl:
              'https://jnqg-prod.oss-cn-beijing.aliyuncs.com/2e87a99e-bf00-4418-95c3-87ab99e8173d/22/04/07/2204077c65d599f10b499fbc7b3506ae21e804.jpg'
        },
        {
          mainTitle: '展室名称',
          subTitle: '副标题',
          Likes:'1208574577',
          publishTime: '2022/3/10',
          url: 'https://cscec.chineseworkers.com.cn/#/broadcast/detail?i=bde4b4ed-9524-4306-a412-716015f80237&viewType=exhibitionCenter',
          tag: '视频展播',
          type: '2',
          showType: '2',
          imgUrl:
              'https://jnqg-prod.oss-cn-beijing.aliyuncs.com/2e87a99e-bf00-4418-95c3-87ab99e8173d/22/04/09/22040997b3c80363984b559584311ce66bf88f.jpg'
        }
      ]
      this.Gridlist =  [
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754256',
          courseName: '标题',
          courseIntroduce: '副标题',
          Likes:'1208574577',
          pageview: 210,
          courseImgUrl: defImg,
          learnNum: 11,
          bid: '1'
        },
        {
          id: '6baeac8b-8502-4b81-9d4b-de537c378ffc',
          courseName: '标题',
          courseIntroduce: '副标题',
          Likes:'1208574577',
          pageview: 111,
          courseImgUrl: defImg,
          learnNum: 18,
          bid: '1'
        },
        {
          id: 'f08e45c2-552b-48f7-ac4f-2340dd68089b',
          courseName: '标题',
          courseIntroduce: '副标题',
          Likes:'1208574577',
          pageview: 79,
          courseImgUrl: defImg,
          learnNum: 8,
          bid: '1'
        },
        {
          id: '0e821f88-60d3-4272-8077-8dc71f8a1141',
          courseName: '标题',
          courseIntroduce: '副标题',
          Likes:'1208574577',
          pageview: 58,
          courseImgUrl: defImg,
          learnNum: 15,
          bid: '1'
        }
      ]
    }
  },
  methods: {
    setData(result) {
      let rows = []
      if (Object.prototype.toString.call(result.onlineShowFixed?.data) === '[object Array]') {
        rows = result.onlineShowFixed?.data || []
      } else {
        rows = result.onlineShowFixed?.data.rows || []
      }

      this.setLabel(Object.assign([], rows), 'list')
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/utility/rem.scss";

.exhibition-room-fixed-page {
  position: relative;

  .exhibition-room-container {
    background-color: #fff;

    .exRoomFixed-page-list {

      > li {
        position: relative;

        > section {
          margin: 0;
        }

        &:after {
          left: rem(20);
          right: rem(20);
          width: auto;
          height: 1px;
          position: absolute;
          z-index: 0;
          bottom: 0;
          content: '';
          background-image: -webkit-linear-gradient(
                  bottom,
                  #ececec 50%,
                  transparent 0
          );
          background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
        }

        &:last-child:after {
          display: none;
        }
      }     
    }
    .box-item {
      width: rem(342);
      background: #ffffff;
      border-radius: rem(12);
      margin-bottom: rem(20);
      padding-bottom: rem(20);
      position: relative;

      .item-img {
        width: rem(342);
        height: rem(180);
        margin: 0 auto;
        position: relative;
        .van-image {
          width: 100%;
          height: 100%;
          border-radius: rem(12) rem(12) 0 0;
          overflow: hidden;
          .van-image__img {
            border-radius: rem(12) rem(12) 0 0;
          }

          .van-image__error {
            border-radius: rem(12) rem(12) 0 0;

            img {
              width: rem(120);
              height: rem(120);
            }
          }
        }
      }

      .item-bottom {
        margin-left: rem(15);
        position: relative;
        .item-title {
          line-height: 1.5;
          font-size: rem(30);
          font-weight: bold;
          text-align: left;
          color: #333333;
          margin-top: rem(15);
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
        }

        .item-desc {
          font-size: rem(24);
          font-weight: 400;
          text-align: left;
          color: #999999;
          margin-top: rem(15);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item-number {
          font-size: rem(24);
          font-weight: 400;
          text-align: left;
          color: #999999;
          margin-top: rem(15);
        }
        .item-left-txt {
          font-size: rem(22);
          font-weight: 400;
          text-align: right;
          color: #999999;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: rem(40);
          position: absolute;
          right: rem(180);
          bottom: rem(-3);
        > span {
          display: inline-block;
          margin-right: rem(20);        
        }
        > img {
          width: rem(49);
          height: rem(49);
          margin-bottom: rem(12);
        }
      }
      }
    }
    .list-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
</style>
